import React, { useRef } from 'react';
import { useIntl, FormattedMessage } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { list } from '@/services/event-log';
import { formatDate } from '@/utils';

const TableList: React.FC = () => {
  const actionRef = useRef<ActionType>();

  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  const intl = useIntl();

  const columns: ProColumns<API.RuleListItem>[] = [
    {
      title: <FormattedMessage id="pages.event-log.list.type" />,
      dataIndex: 'icon',
    },
    {
      title: <FormattedMessage id="pages.event-log.list.name" />,
      dataIndex: 'name',
    },
    {
      title: <FormattedMessage id="pages.event-log.list.startAt" />,
      dataIndex: 'startAt',
      renderText: formatDate,
    },
    {
      title: <FormattedMessage id="pages.event-log.list.endAt" />,
      dataIndex: 'endAt',
      renderText: formatDate,
    },
  ];

  return (
    <PageContainer>
      <ProTable<API.RuleListItem, API.PageParams>
        headerTitle={intl.formatMessage({ id: 'pages.event-log.list.title' })}
        actionRef={actionRef}
        rowKey="key"
        search={{ labelWidth: 120 }}
        request={list}
        columns={columns}
      />
    </PageContainer>
  );
};

export default TableList;
